<template>
    <div>
        <!--面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图-->
        <el-card>
            <el-table :data="permList" border stripe width="100%">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="权限名称" prop="name"></el-table-column>
                <el-table-column label="路径" prop="path"></el-table-column>
                <el-table-column label="权限等级" prop="order">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.order === 0">一级权限</el-tag>
                        <el-tag type="success" v-else-if="scope.row.order === 1">二级权限</el-tag>
                        <el-tag type="warning" v-else>三级权限</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

    </div>
</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                permList: [
                    {
                        id: 1,
                        order: 0,
                        name: '系统管理',
                        pid: 0,
                        path: 'sysManage',
                    },
                    {
                        id: 11,
                        order: 1,
                        name: '用户列表',
                        pid: 1,
                        path: 'userList',
                    }, {
                        id: 12,
                        order: 1,
                        name: '角色列表',
                        pid: 1,
                        path: 'roleList',
                    }, {
                        id: 13,
                        order: 1,
                        name: '权限列表',
                        pid: 1,
                        path: 'permList',
                    }
                    , {
                        id: 2,
                        order: 0,
                        name: '其他管理',
                        pid: 0,
                        path: 'otherManage',
                    },
                    {
                        id: 21,
                        order: 1,
                        name: '其他列表1',
                        pid: 2,
                        path: 'other1List',
                    }, {
                        id: 22,
                        order: 2,
                        name: '其他列表2',
                        pid: 2,
                        path: 'other2List',
                    }, {
                        id: 23,
                        order: 2,
                        name: '其他列表3',
                        pid: 2,
                        path: 'other3List',
                    }
                ]
            }
        }, created() {
            this.getPermList();
        },
        methods: {
            // 获取权限数据
            async getPermList() {
                /*const {data: res} = await this.$http.post('getPermList');
                if (res.code + '' === '200') {
                    this.permList = res.data;
                }*/
            }
        }

    }
</script>

<style lang="less" scoped>

</style>
